<template>
  <div class="content-area">
    <h2>权限管理</h2>
    <div class="content">
      <el-tree
        :data="permissionTree"
        :props="defaultProps"
        show-checkbox
        node-key="id"
        default-expand-all
        class="permission-tree"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'PermissionManagement',
  data() {
    return {
      permissionTree: [
        {
          id: 1,
          label: '系统管理',
          children: [
            {
              id: 11,
              label: '用户管理',
              children: [
                { id: 111, label: '查看用户' },
                { id: 112, label: '添加用户' },
                { id: 113, label: '编辑用户' },
                { id: 114, label: '删除用户' }
              ]
            },
            {
              id: 12,
              label: '角色管理',
              children: [
                { id: 121, label: '查看角色' },
                { id: 122, label: '添加角色' },
                { id: 123, label: '编辑角色' },
                { id: 124, label: '删除角色' }
              ]
            }
          ]
        },
        {
          id: 2,
          label: '数据管理',
          children: [
            { id: 21, label: '数据导入' },
            { id: 22, label: '数据导出' },
            { id: 23, label: '数据备份' }
          ]
        },
        {
          id: 3,
          label: '报表管理',
          children: [
            { id: 31, label: '查看报表' },
            { id: 32, label: '生成报表' },
            { id: 33, label: '导出报表' }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  }
}
</script>

<style scoped>
.content-area {
  background: white;
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  min-height: 400px;
}

.content-area h2 {
  color: #303133;
  margin-bottom: 20px;
  border-bottom: 2px solid #409eff;
  padding-bottom: 10px;
}

.content {
  color: #606266;
  line-height: 1.8;
  font-size: 16px;
}

.permission-tree {
  margin-top: 20px;
}
</style> 